<template>
  <div id="app">
    <name-input
      ref="nameInput"
      class="input-line-1"
    ></name-input>
    <id-input
      ref="idInput"
    ></id-input>
    <button
      class="baseBgColorWithActive submit-btn"
      @click="submit"
    >提交</button>
    <p class="apply-hint">{{hint}}</p>
  </div>
</template>

<script>
import IdInput from './components/input/IdInput'
import NameInput from './components/input/NameInput'
export default{
  components: {
    'name-input': NameInput,
    'id-input': IdInput
  },
  data() {
    return {
      hint: '注：请输入本人姓名及本人有效身份证号，以便为您提供后续服务。',
      btnClicked: false
    }
  },
  methods: {
    submit() {
      if (this.btnClicked) {
        return
      }
      this.btnClicked = true
      Promise.all([this.$refs.nameInput.valid(), this.$refs.idInput.valid()]).then(data => {
        this.btnClicked = false
      }).catch(error => {
        console.log('错误', error)
        this.$toastMsg(error.message)
        this.btnClicked = false
      })
    }
  }
}
</script>

<style scoped>
  #app {
    padding: 0 30px;
  }
  .submit-btn {
    width: 690px;
    height: 80px;
    color: #ffffff;
    border: none;
    margin: 50px 0 30px 0;
    border-radius: 36px;
    font-size:16px;/*no*/
  }
  .apply-hint {
    font-size: 14px; /*no*/
    line-height: 20px;/*no*/
    color: #999;
  }
</style>
